<template>
  <el-dialog
    width="840px"
    :visible="dialogVisible"
    @close="closeDialog"
    title="新增计划"
    center
    custom-class="common-dialog person-dialog"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="addForm"
      :model="add"
      label-width="124px"
      hide-required-asterisk
      :rules="rules"
    >
      <el-row type="flex">
        <el-col :span="24">
          <!-- <h4>基本信息</h4> -->
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="组织" prop="org">
                <el-select
                  v-model="add.org"
                  placeholder="请选择组织"
                  size="small"
                >
                  <el-option
                    v-for="item in orgOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="品种" prop="pz">
                <el-select
                  v-model="add.pz"
                  placeholder="请选择品种"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in pzOption"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车间" prop="cj">
                <el-select
                  v-model="add.cj"
                  placeholder="请选择车间"
                  size="small"
                >
                  <el-option
                    v-for="item in cjOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="络筒机台" prop="devSnArea">
                <el-input
                  v-model="devSnAreaText"
                  placeholder="请选择"
                  disabled
                  size="small"
                  style="width:206px"
                  class="devSn-input"
                />
                <el-button
                  class="devSn-add"
                  size="small"
                  title="添加机台"
                  type="primary"
                  icon="el-icon-plus"
                  @click="showDialog('devSnArea')"
                ></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
    <l-dialog ref="dialog" :time="time" @getDevSnArr="getDevSnArr"></l-dialog>
  </el-dialog>
</template>

<script>
import { addLuotongPlan } from '@/api/productionPlan';
import lDialog from './dialog.vue';
export default {
  props: ['time', 'pzOption'],
  components: { lDialog },
  data() {
    return {
      dialogVisible: false,
      add: {
        org: '',
        cj: '',
        devSnArea: [],
        pz: '',
        time: ''
      },
      devSnAreaText: '',
      rules: {
        org: [{ required: true, message: '请选择组织', trigger: 'change' }],
        cj: [{ required: true, message: '请选择车间', trigger: 'change' }],
        devSnArea: [
          { required: true, message: '请选择机台', trigger: 'change' }
        ],
        pz: [{ required: true, message: '请选择品种', trigger: 'change' }]
      }
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    orgOption() {
      return this.$store.getters.orgOption;
    }
  },
  methods: {
    show(gongxu) {
      this.add.time = this.time + ' 00:00:00';
      this.add.gongxu = gongxu;
      this.dialogVisible = true;
    },
    showDialog(param) {
      this.$refs.dialog.show(this.add, param, true);
    },
    // 添加或修改人员
    confirm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          let form = this.$_.pick(this.add, [
            'cj',
            'devSnArea',
            'org',
            'pz',
            'time'
          ]);
          const res = await addLuotongPlan(form);
          if (res.code == 1) {
            this.$message.success('添加成功');
            this.dialogVisible = false;
            this.$emit('getData');
          }
        } else {
          this.$message({
            message: '请完成必填项！',
            iconClass: 'el-icon-warning',
            customClass: 'common-message'
          });
          return false;
        }
      });
    },
    getDevSnArr(params, arr) {
      this.add[params] = arr;
      this[params + 'Text'] = this.getSeiresDevsn(arr);
    },
    // 获取连续车台
    getSeiresDevsn(arr) {
      if (arr) {
        var result = [],
          i = 0,
          str = '';
        if (arr.length > 0) {
          result[i] = [arr[0]];
          arr.reduce(function(prev, cur) {
            parseInt(cur) - parseInt(prev) == 1
              ? result[i].push(cur)
              : (result[++i] = [cur]);
            return cur;
          });
          result.map(item => {
            if (item.length > 1) {
              str += `#${item[0]}~#${item[item.length - 1]},`;
            } else {
              str += `#${item[0]},`;
            }
          });
          str = str.substring(0, str.length - 1);
        } else {
          str = '';
        }
        return str;
      }
    },
    closeDialog() {
      this.devSnAreaText = '';
      this.devSnAreaCsText = '';
      this.$refs['addForm'].resetFields();
      this.$refs['addForm'].clearValidate();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.person-dialog {
  .devSn-add {
    padding: 4px 4px;
    font-weight: bold;
    margin-left: 10px;
  }
  .devSn-input.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    color: #606266;
    cursor: unset;
  }
}
</style>
